<template>
  <div class="layout-demo">
    <Switch
      open-color="#2f8f6d"
      close-color="#bb1c33"
      v-model:value="toggle2"
      size="large"
    ></Switch>
    <Switch
      open-color="#2f8f6d"
      close-color="#bb1c33"
      v-model:value="toggle"
    ></Switch>
    <Switch
      open-color="#2f8f6d"
      close-color="#bb1c33"
      v-model:value="toggle3"
      size="small"
    ></Switch>
    <Switch
      open-color="#2f8f6d"
      disabled
      close-color="#bb1c33"
      v-model:value="toggle4"
    ></Switch>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let toggle = ref<Boolean>(false);
let toggle2 = ref<Boolean>(true);
let toggle3 = ref<Boolean>(false);
let toggle4 = ref<Boolean>(false);
</script>
<style lang="scss" scoped>
.layout-demo {
  margin-bottom: 20px;
  .t-switch {
    margin-right: 20px;
  }
}
</style>
